<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JQUERY图片循环滚动</title> <meta charset="utf-8" /> <style> body,ul,li{ margin:0; padding:0; } body{ font:14px/24px Microsoft YaHei; color:#333; } ul{ list-style:none; } a{ color:#333; outline:none; text-decoration:none; } a:hover{color:#ffd800;} .warp{width:1326px;padding-top:30px; margin:0 auto;background:#ccc;} .boxs { padding: 15px; margin: 0 auto 30px; background-color: #e4fbff; width:1296px; } .autoBox{ position:relative; margin:0 auto; overflow:hidden; } .autoBox ul{ position:absolute; list-style:none; z-index:2; } #autoScroll{ width:auto; height:264px; } #autoScroll ul li{ float:left; width:308px; height:258px; padding:3px; margin:0 5px; _display:inline; } #autoScroll ul li a{ display: block; padding: 3px; border: 1px solid #dbdbdb; box-shadow: 0 0 3px rgba(170, 223, 252, 0.5); } #autoScroll li img{ width:300px; height:250px; display:block; } </style></head><body> <div class="warp"> <div class="boxs"> <div class="autoBox" id="autoScroll"> <ul> <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/300x250?text=Preview1"/></a></li> <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/300x250?text=Preview2" /></a></li> <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/300x250?text=Preview3" /></a></li> <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/300x250?text=Preview4" /></a></li> <li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/300x250?text=Preview5" /></a></li> </ul> </div> </div> </div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> //方法一，不完善 (function(jQuery){ $.fn.autoScroll = function (o) { o = $.extend({//设置默认参数 direction: "left", interval: null, speed: null, distance: null, liWidth: null, liHeight: null, showNum:null }, o || {}); return this.each(function () {//回调开始 var $ts = $(this), $ul = $ts.children("ul"), $li = $ul.children("li"), len = $li.length; if (o.direction == "left" || o.direction == "right") { $ts.css({ "width": o.showNum * o.liWidth }); $ul.css({ "width": len * o.liWidth }); $li.css({ "float": "left" }); }; switch (o.direction) {//分两种情况，进行事件调用 case "left": sroLeft(); break; case "right": sroRight(); break; }; function sroLeft() {//向左滚动事件 $ul.css("left", 0); var left; function leftMoving() { var dis = -o.distance, dif = -o.liWidth * (len - o.showNum), left = parseFloat($ul.css("left")); if (left <= dif) { $ul.css("left", 0); left = 0; $ul.delay(o.interval); }; var ltDis = left + dis; if (ltDis <= dif) { ltDis = dif; } $ul.animate({ "left": ltDis + "px" }, o.speed); }; $ul.hover(function(){ clearInterval(fnLeft); }, function(){ fnLeft = setInterval(function(){leftMoving() }, o.interval); }); fnLeft = setInterval(function(){leftMoving() },o.interval); } /*function sroRight(){}*/ }); }; })(jQuery); </script> <script> $(function () { $("#autoScroll").autoScroll({ direction: "left", //滚动方向 interval: 40, //滚动间隔 speed: 10, //滚动完成耗时,一定要小于'滚动间隔' distance: 3, //单次滚动距离 liWidth: 324, //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数) showNum: 4 //显示几个li，父级高会自适应，但不要超过最大个数 }); }); </script></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦